<template>
  <div class="theme-settings">
    <h3>{{ t('layout.themeSettings') }}</h3>
    
    <!-- 主题模式选择 -->
    <div class="setting-item">
      <label for="theme-mode">{{ t('layout.themeMode') }}:</label>
      <div class="theme-mode-selector">
        <Button 
          :severity="layoutMode === 'light' ? 'primary' : 'secondary'" 
          @click="setLayoutMode('light')"
          icon="pi pi-sun"
          class="w-12 h-12 flex flex-col items-center justify-center gap-1 p-2"
        >
          <span class="text-xs hidden sm:inline">{{ t('layout.light') }}</span>
        </Button>
        <Button 
          :severity="layoutMode === 'dark' ? 'primary' : 'secondary'" 
          @click="setLayoutMode('dark')"
          icon="pi pi-moon"
          class="w-12 h-12 flex flex-col items-center justify-center gap-1 p-2"
        >
          <span class="text-xs hidden sm:inline">{{ t('layout.dark') }}</span>
        </Button>
      </div>
    </div>
    
    <!-- 主题颜色选择 -->
    <div class="setting-item">
      <label for="theme-color">{{ t('layout.themeColor') }}:</label>
      <div class="theme-colors">
        <button 
          v-for="color in themeColors" 
          :key="color.value"
          :class="['theme-color-swatch', { 'active': themeColor === color.value }]"
          :style="{ backgroundColor: color.value }"
          @click="setThemeColor(color.value)"
          :title="color.name"
        >
          <span v-if="themeColor === color.value" class="check-mark">✓</span>
        </button>
      </div>
    </div>
    
    <!-- 侧边栏折叠控制 -->
    <div class="setting-item">
      <label for="sidebar-collapse">{{ t('layout.sidebar') }}:</label>
      <div class="sidebar-controls">
        <Button 
          :severity="sidebarCollapsed ? 'secondary' : 'primary'" 
          @click="setSidebarCollapsed(false)"
          icon="pi pi-arrow-right"
          class="w-12 h-12"
          :title="t('layout.expandSidebar')"
        />
        <Button 
          :severity="sidebarCollapsed ? 'primary' : 'secondary'" 
          @click="setSidebarCollapsed(true)"
          icon="pi pi-arrow-left"
          class="w-12 h-12"
          :title="t('layout.collapseSidebar')"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useLayoutStore } from '../store/modules/layout'
import { t } from '../i18n'
import Button from 'primevue/button'
// 使用 PrimeIcons 字体图标替代

// 使用布局store
const layoutStore = useLayoutStore()

// 布局状态
const layoutMode = computed(() => layoutStore.layoutMode)
const themeColor = computed(() => layoutStore.themeColor)
const sidebarCollapsed = computed(() => layoutStore.sidebarCollapsed)

// 主题颜色选项
const themeColors = [
  { name: '蓝色', value: '#1976D2' },
  { name: '靛蓝', value: '#3F51B5' },
  { name: '深紫', value: '#673AB7' },
  { name: '粉色', value: '#E91E63' },
  { name: '红色', value: '#F44336' },
  { name: '橙色', value: '#FF9800' },
  { name: '黄色', value: '#FFC107' },
  { name: '绿色', value: '#4CAF50' }
]

// 设置布局模式
const setLayoutMode = (mode: 'light' | 'dark') => {
  layoutStore.setLayoutMode(mode)
}

// 设置主题颜色
const setThemeColor = (color: string) => {
  layoutStore.setThemeColor(color)
}

// 设置侧边栏折叠状态
const setSidebarCollapsed = (collapsed: boolean) => {
  layoutStore.setSidebarCollapsed(collapsed)
}
</script>

<style scoped>
.theme-settings {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 16px 0;
}

.setting-item {
  margin-bottom: 24px;
}

.setting-item:last-child {
  margin-bottom: 0;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.theme-mode-selector {
  display: flex;
  gap: 8px;
}

.theme-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 12px;
}

.theme-color-swatch {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.theme-color-swatch:hover {
  transform: scale(1.1);
}

.theme-color-swatch.active {
  border-color: #666;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.check-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sidebar-controls {
  display: flex;
  gap: 8px;
}
</style>